<template>
	<view class="Numb">
		<p style="margin: 10px;">当前期号：{{ title}}</p>
	</view>
	<view class="qucke">
		<span v-for="(item,index) in SX" :key="index" @click="quckply(item)">
			{{item}}
		</span>
	</view>
	<!-- 7行7列表格,填入1-49数值 -->
	<view class="flex flex-wrap">
		<!-- 12个格子 -->


		<view @click="add_je(index)" class="flex-item" v-for="(item,index) in je" :key="index"><span class="boll"
				:data-id="index"
				style="margin: auto;margin-top: 5px;">{{ index }}</span><br>{{shengxiao(index)}}<br><span
				style="font-size: 12px;">{{item}}</span> </view>
	</view>
	<view class="heji">合计：{{heji }}</view>

	<view class="pailei">
		<p style="margin: 10px;">排行榜</p>
		<ul>
			<li v-for="(value, key) in sortedJe" :key="key">
				<span class="boll" :data-id="value.key">{{ value.key }}</span>{{shengxiao(value.key)}} {{ value.value }}
			</li>
		</ul>
	</view>

	<view class="flot_btn">
		<!-- 加号图标 点击弹出信息-->
		<!-- <button class="btn" @click="Add_List"> -->
		<uni-icons type="checkmarkempty" color="#fff" @click="Savelist"> </uni-icons>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				SX: ['🐀 鼠', '🐂 牛', '🐅 虎', '🐇 兔', '🐉 龙', '🐍 蛇', '🐎 马', '🐏 羊', '🐒 猴', '🐔 鸡', '🐕 狗', '🐖 猪'],
				sx_number: {
					'🐀 鼠': [6, 18, 30, 42],
					"🐂 牛": [5, 17, 29, 41],
					'🐅 虎': [4, 16, 28, 40],
					'🐇 兔': [3, 15, 27, 39],
					'🐉 龙': [2, 14, 26, 38],
					'🐍 蛇': [1, 13, 25, 37, 49],
					'🐎 马': [12, 24, 36, 48],
					'🐏 羊': [11, 23, 35, 47],
					'🐒 猴': [10, 22, 34, 46],
					'🐔 鸡': [9, 21, 33, 45],
					'🐕 狗': [8, 20, 32, 44],
					'🐖 猪': [7, 19, 31, 43]
				},
				title: '',
				id: 0,
				heji: 0,
				je_1: {
					1: 1
				},
				je: {
					1: 64.29,
					2: 23.77,
					3: 65.22,
					4: 41.26,
					5: 57.82,
					6: 84.47,
					7: 48.56,
					8: 75.44,
					9: 26.58,
					10: 61.19,
					11: 37.06,
					12: 21.12,
					13: 54.05,
					14: 19.02,
					15: 29.03,
					16: 2.77,
					17: 23.26,
					18: 0.24,
					19: 40.58,
					20: 0.62,
					21: 16.02,
					22: 99.32,
					23: 64.14,
					24: 24.76,
					25: 96.41,
					26: 63.39,
					27: 22.22,
					28: 87.33,
					29: 44.04,
					30: 18.64,
					31: 16.32,
					32: 0.55,
					33: 15.41,
					34: 36.1,
					35: 55.4,
					36: 95.57,
					37: 54.26,
					38: 18.29,
					39: 25.17,
					40: 99.29,
					41: 33.94,
					42: 22.24,
					43: 97.77,
					44: 84.13,
					45: 19.39,
					46: 63.34,
					47: 24.57,
					48: 39.08,
					49: 18.31
				}
			};
		},
		computed: {

			sortedJe() {

				return Object.entries(this.je)
					.sort((a, b) => b[1] - a[1]) // 按值降序排序
					.map(([key, value]) => ({
						key,
						value
					})); // 转换为 { key, value } 形式

			},
			top3() {
				// 1. 将对象转为数组并排序
				const sorted = Object.entries(this.je)
					.sort((a, b) => b[1] - a[1]) // 按值降序排列
					.slice(0, 3); // 取前3项

				// 2. 格式化为 {key, value} 结构
				return sorted.map(([key, value]) => ({
					key: key,
					value: value
				}));
			}
		
	},
	onLoad(options) {
			console.log('请求id：' + options.id)
			this.id = options.id
			this.title = options.title
			this.jshj()
			
		

		},

		methods: {
			shengxiao(id) {

				switch (Number(id)) {
					case 1:
					case 13:
					case 25:
					case 37:
					case 49:
						return this.SX[5]
						break;
					case 2:
					case 14:
					case 26:
					case 38:
						return this.SX[4]
						break;
					case 3:
					case 15:
					case 27:
					case 39:
						return this.SX[3]
						break;
					case 4:
					case 16:
					case 28:
					case 40:
						return this.SX[2]
						break;
					case 5:
					case 17:
					case 29:
					case 41:
						return this.SX[1]
						break;
					case 6:
					case 18:
					case 30:
					case 42:
						return this.SX[0]
						break;
					case 7:
					case 19:
					case 31:
					case 43:
						return this.SX[11]
						break;
					case 8:
					case 20:
					case 32:
					case 44:
						return this.SX[10]
						break;
					case 9:
					case 21:
					case 33:
					case 45:
						return this.SX[9]
						break;
					case 10:
					case 22:
					case 34:
					case 46:
						return this.SX[8]
						break;
					case 11:
					case 23:
					case 35:
					case 47:
						return this.SX[7]
						break;
					case 12:
					case 24:
					case 36:
					case 48:
						return this.SX[6]
						break;

				}
			},
			jshj() {
				//统计JE的和
				let sum = 0;
				for (let i in this.je) {
					sum += this.je[i]
				}
				this.heji = sum
			},
			add_je(id) {
				//弹出输入框让用户输入金额
				uni.showModal({
					title: id + '  请输入金额',
					content: '',
					inputType: 'number',
					editable: true, //是否显示输入框
					placeholderText: '请输入金额', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							//判断是否是数值
							if (isNaN(res.content)) {
								uni.showToast({
									title: '请输入数字',
									icon: 'none'
								})
							} else {
								//判断是否是负数
								if (res.content < 0) {
									uni.showToast({
										title: '请输正整数',
										icon: 'none'
									})
								} else {
									//判断是否是0
									if (res.content == 0) {
										uni.showToast({
											title: '请输入非0数字',
											icon: 'none'
										})
									} else {
										this.je[id] += Number(res.content)

									}
								}
							}


							this.jshj()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			quckply(id) {
				// uni.showToast({
				// 	title: id + '：开发中……',
				// 	duration: 500,
				// 	icon: 'none'
				// })


				uni.showModal({
					title: id + '  请输入金额',
					content: '',
					inputType: 'number',
					editable: true, //是否显示输入框
					placeholderText: '请输入金额', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							//判断是否是数值
							if (isNaN(res.content)) {
								uni.showToast({
									title: '请输入数字',
									icon: 'none'
								})
							} else {
								//判断是否是负数
								if (res.content < 0) {
									uni.showToast({
										title: '请输正整数',
										icon: 'none'
									})
								} else {
									//判断是否是0
									if (res.content == 0) {
										uni.showToast({
											title: '请输入非0数字',
											icon: 'none'
										})
									} else {
										//这里是批量购买逻辑
										console.log('输入金额:' + res.content)
										console.log(this.je[this.sx_number[id][0]] + Number(res.content)) //测试
										for (let i in this.sx_number[id]) {
											console.log(this.sx_number[id][i] + ":", this.je[this.sx_number[id]
												[i]] + Number(res.content))
										}

									}
								}
							}


							// this.jshj()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});





				//测试
				// console.log(typeof(id), id)

				// console.log(id + "的第一个值是：" + this.sx_number[id][0], '长度是：' + this.sx_number[id].length)

				// for (let i in this.sx_number[id]) {
				// 	console.log(this.sx_number[id][i])

				// }

			},

			Savelist() {
				console.log('保存！！！！！！！！！')
				console.log(this.id)
				//把this.je转换为文本
				let je_text = JSON.stringify(this.je)
				console.log(typeof(je_text), je_text)
				//把this.je前3个最大键值的转换为文本
				let top3 = JSON.stringify(this.top3)
				console.log(typeof(top3), JSON.stringify(top3))
				let sql_text =''
				//更新sql语句
				sql_text = 'update list set je=\'' + je_text + '\',top3=\'' + top3 + '\' where id=' + this.id
				console.log(sql_text)
				


			}
		}, //methods结束

	}
</script>

<style>
	.qucke {
		margin: auto;
		width: 90%;
		/* border: #ccc solid 1px; */
		justify-content: center;
		align-items: left;
		display: flex;
		flex-wrap: wrap;

	}

	.qucke span {
		display: inline-block;
		width: 12%;
		padding: 5px;
		margin: auto;
		margin-top: 5px;
		/* border: #ccc solid 1px; */
		border-radius: 5px;
		text-align: center;
		background-color: #007aff;
		color: #fff;
		font-size: 24px;
	}

	.flex {
		/* 往下移10像素 */
		margin-top: 10px;
		/* 居中 */
		justify-content: center;
		align-items: left;
		display: flex;
		flex-wrap: wrap;
	}

	.flex-item {
		width: 12%;
		/* height: 55px; */
		border: 1px solid #ccc;
		text-align: center;
		margin: 2px;

	}

	.heji {
		/* float: right; */
		padding-right: 1em;
		width: 90%;
		margin: auto;
		padding-top: 1em;
		text-align: right;
		/* border: #ccc solid 1px; */
	}

	.Numb {
		/* padding-left: 0.8em; */
		width: 90%;
		margin: auto;
	}

	.pailei {
		width: 95%;
		margin: auto;
		/* padding: 10px; */
		/* border: #ccc solid 1px; */
		padding-bottom: 30px;

	}

	.pailei.ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	.pailei li {
		display: inline-block;
		width: 40%;
		margin: 3px;
		padding: 5px;
		border: 1px solid #ccc;
	}

	.boll {
		display: inline-block;
		color: #fff;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background-color: #ccc;
		text-align: center;
		line-height: 22px;
		margin-right: 5px;
		padding: 2px;
	}


	.boll[data-id="1"],
	.boll[data-id="2"],
	.boll[data-id="7"],
	.boll[data-id="8"],
	.boll[data-id="12"],
	.boll[data-id="13"],
	.boll[data-id="18"],
	.boll[data-id="19"],
	.boll[data-id="23"],
	.boll[data-id="24"],
	.boll[data-id="29"],
	.boll[data-id="30"],
	.boll[data-id="34"],
	.boll[data-id="35"],
	.boll[data-id="45"],
	.boll[data-id="40"],
	.boll[data-id="46"] {
		background-color: red;
	}

	.boll[data-id="3"],
	.boll[data-id="4"],
	.boll[data-id="14"],
	.boll[data-id="15"],
	.boll[data-id="25"],
	.boll[data-id="26"],
	.boll[data-id="37"],
	.boll[data-id="41"],
	.boll[data-id="42"],
	.boll[data-id="10"],
	.boll[data-id="9"],
	.boll[data-id="20"],
	.boll[data-id="31"],
	.boll[data-id="36"],
	.boll[data-id="47"],
	.boll[data-id="48"] {
		background-color: blue;
	}

	.boll[data-id="5"],
	.boll[data-id="6"],
	.boll[data-id="16"],
	.boll[data-id="17"],
	.boll[data-id="27"],
	.boll[data-id="28"],
	.boll[data-id="38"],
	.boll[data-id="39"],
	.boll[data-id="49"],
	.boll[data-id="11"],
	.boll[data-id="21"],
	.boll[data-id="22"],
	.boll[data-id="32"],
	.boll[data-id="33"],
	.boll[data-id="44"],
	.boll[data-id="43"] {
		background-color: green;
	}

	.flot_btn {
		position: fixed;
		bottom: 10px;
		right: 10px;
		width: 36px;
		height: 36px;
		background-color: #007aff;
		/* border: #000 solid 1px; */
		border-radius: 50%;

		text-align: center;
		line-height: 36px;
		/* font-size: 20px; */
		color: #fff;
	}
</style>